<template>
  <div>
    <h2>简易加法计算器</h2>
    <div>
      <input type="button" value="-" @click="reduceHandle({de:5})"/>
      <span>{{count}}</span>
      <input type="button" value="+" @click="addHandle"/>
    </div>

    <p>{{num2}}</p>
  </div>
</template>

<script>
  import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

  export default {
   // mapState 的各种用法
    //computed: mapState({
     // num:state=>state.count
     // num:'count'
      /*num(state){
        return state.count+100
      }*/
    //  count:'count'

   // }),
    //computed:mapState(['count']),

    computed:{
      abc(){
        return 123
      },
      ...mapState(['count']),
      ...mapGetters({
        num2:'filterCount'
      })
    },

    /*{
      num() {
        // 从 store 中取出数据
        return this.$store.state.count
      },
      num2(){
        return this.$store.getters.filterCount;
      }
    },*/
    methods: {
     /* addHandle() {
        // 改变状态,提交 mutation addIncrement
       // this.$store.commit("addIncrement",{n:5}) // 类似于 事件 事件处理函数的关系
        // 异步触发 action
        this.$store.dispatch("addAction")

      },*/
      ...mapActions({
        addHandle:'addAction'
      }),
      ...mapMutations({
        reduceHandle:'reduceDecrement'
      })
    /*  reduceHandle() {
        // 改变状态,提交 mutation reduceDecrement
       // this.$store.commit("reduceDecrement") // 类似于 事件 事件处理函数的关系
        this.$store.commit({
          type:'reduceDecrement',
          de:10
        })

      }*/
    }

  }
</script>
<style>

</style>
